<template>
	<view class="sign">
		<view class="login-con">
			<image src="../../static/logo.jpg" mode=""></image>
		</view>
		<view class="login">
			<!-- 验证码登录 -->
			<view>
				<view class="phone ">
					<input class="uni-input" placeholder-class="phClass" focus placeholder="请输入手机号" v-model="userNamePhone" />
					<image src="../../static/sj.png" mode=""></image>
				</view>
				<view class="phone  account">
					<input class="uni-input" placeholder-class="phClass" focus placeholder="请输入验证码" v-model="userPwdPhone" />
					<image src="../../static/yzm.png" mode=""></image>
					<!-- 获取验证码 -->
					<view class="code"><text @click="getPhonecode()">{{codeBtn.codeText}}</text></view>
				</view>
			</view>
			<view class="forget">
				<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />
				<view class="input-forget">同意<text class="text-protocol">《平台协议》</text></view>
			</view>
			<view class="sign-in">
				<button type="primary" @click="toLogin()" :disabled="logining">确认</button>
				<view class="view" @click="giveUpLogin()">
					放弃登录
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				logining: false,
				//用户名输入内容
				userNamePhone: "",
				userPwdPhone: "",
				codeBtn: {
					codeTime: 60,
					codeText: "发送验证码",
					codeStatus: true
				},
				rules: {
					userNamePhone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					userPwdPhone: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				}
			};
		},
		onReady() {
			// 6a931ac5342fe31ad5dca806389a81ee 
		},
		methods: {
			...mapMutations(['login']),
			changeSeen() {
				this.seen = !this.seen;
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack({
					delta: 2
				});
			},
			async toLogin() {

				const result = await this.$api.json('userInfo');
				if (result.status === 1) {
					this.login(result.data);
					uni.navigateBack();
				} else {
					this.$api.msg(result.msg);
					this.logining = false;
				}
			},
			getPhonecode() {
				if (this.validate('userNamePhone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if (codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					}, 1000)
				}
			},
			toLogin() {
				this.logining = true;
				const {
					mobile,
					password
				} = this;
				var isFormValid = true;
				if (!this.$api.util.validateMobileNo(mobile)) {
					this.$api.msg('手机号码格式错误');
					isFormValid = false;
				} else if (!this.$api.util.validatePassword(password)) {
					this.$api.msg('密码为8-20位字母数字下划线组合');
					isFormValid = false;
				}
				if (!isFormValid) {
					this.logining = false;
					return;
				}
				this.$api.request.login({
					verifyType: 'PASSWORD',
					personalPhone: mobile,
					personalPhoneCountryCode: '86',
					password: password
				}, loginRes => {
					if (loginRes.body.status.statusCode === '0') {
						var tokenId = loginRes.header.tokenId;
						uni.setStorageSync('userToken', tokenId);
						this.login(loginRes.body.data); //将用户信息保存起来
						if (this.to) {
							uni.navigateTo({
								url: this.to
							})
						} else {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
					} else {
						this.$api.msg(loginRes.body.status.errorDesc);
						this.logining = false;
					}
				});
			},
			giveUpLogin(){
				uni.removeStorageSync('userinfo');
				uni.removeStorageSync('openid');
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.sign {
		width: 100%;
		height: 100%;

		.login-con {
			padding: 104rpx 0;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.login {
			padding: 0 40rpx;
			// padding: 0 90rpx;


			.forget {
				padding-top: 24rpx;
				display: flex;
				align-items: center;

				.input-forget {
					width: 100%;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);


					.text-protocol {
						color: #E0636F;
					}
				}
			}

			.uni-input {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				padding: 0 91rpx;
				outline: none;
				border: 0;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 27px;

			}

			.phone {
				border-radius: 44rpx;
				border: 1rpx solid #F0C0C5;
				display: flex;
				align-items: center;
				position: relative;

				image {
					position: absolute;
					left: 5%;
					width: 40rpx;
					height: 40rpx;
				}

				.phClass {
					color: rgba(232, 181, 186, 1);
				}
			}

			.account {
				margin-top: 45rpx;

				.code {
					position: absolute;
					right: 6%;
					color: #E0636F;

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(224, 99, 111, 1);
						line-height: 27px;
						margin-left: 18rpx;
					}
				}
			}

			.sign-in {

				height: auto;
				margin: 88rpx auto;

				.unregistered {
					text-align: left;
					margin-left: 10rpx;
					margin-bottom: 24rpx;
					color: #999999;
					font-size: 22rpx;

				}

				button {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					background: rgba(232, 67, 84, 1);
					border-radius: 44rpx;
				}

				.view {
					width: 100%;
					margin-top: 20rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
					line-height: 27px;
				}
			}
		}

	}
</style>
